<template>
	<div style="height: 100%;" v-loading="loading">
		<el-form :inline="true" :model="searchObj" class="demo-form-inline">
			<el-form-item label="设备名:">
				<el-input v-model="searchObj.deviceName" />
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="getTable">查询</el-button>
				<el-button type="warning" @click="resetForm">重置</el-button>
			</el-form-item>
		</el-form>
		<div>
			<el-button type="danger" @click="delDeviceGroupIdFunc">移出分组</el-button>
		</div>
		<el-table :data="tableData" max-height="700px" style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column type="index" width="55" />
			<el-table-column prop="deviceName" label="设备名" width="150px"/>
			<el-table-column prop="taskName" label="当前任务" width="200px"/>
			<el-table-column prop="taskStatus" label="状态" width="100px">
				<template #default="scope">
					<el-tag v-if="scope.row.taskStatus == '掉线'" type="danger">{{ scope.row.taskStatus }}</el-tag>
					<el-tag v-else-if="scope.row.taskStatus == '空闲'" type="success">{{ scope.row.taskStatus }}</el-tag>
					<el-tag v-else-if="scope.row.taskStatus == '忙碌'" type="warning">{{ scope.row.taskStatus }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="分辨率" width="150px">
				<template #default="scope">
					{{ scope.row.device_width + 'x' + scope.row.device_height }}
				</template>
			</el-table-column>
			<el-table-column prop="groupId" label="分组id" width="150px" show-overflow-tooltip/>
			<el-table-column prop="deviceMsg" label="最新消息" />
			<el-table-column prop="updateTime" label="更新时间" align="right"/>
		</el-table>
		<el-pagination :current-page="searchObj.page" :page-size="searchObj.limit" :total="total" :page-sizes="[50, 100, 500, 1000]" layout="sizes, prev, pager, next, total" @update:page-size="handleSizeChange" @update:current-page="handleCurrentChange" style="padding: 10px 0px;" />
	</div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { devicePageListByGroupIdApi,deviceInGroupApi } from '@/api/device'

const props = defineProps(['row'])
const emit = defineEmits(['close']);
let total = ref(0)
let loading = ref(false)

const multipleSelection = ref([])
const tableData = reactive([])

const searchObj = reactive({
	deviceName: '',
	groupId:props.row._id,
	page:1,
	limit:50
})

const resetForm = async () => {
	searchObj.deviceName = ''
	await getTable()
}

const getTable = async () => {
	loading.value = true
	const { data,count } = await devicePageListByGroupIdApi(searchObj)
	total.value = count
	tableData.length = 0
	tableData.push(...data)
	loading.value = false
}

const delDeviceGroupIdFunc = async ()=>{
	if(!multipleSelection.value.length) return ElMessage.error('请勾选数据')
	ElMessageBox.confirm(`确认数据移除[${props.row.groupName}]分组?`,'提醒',{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	).then(async () => {
		let ids = multipleSelection.value.map(item=>item._id)
		const res = await deviceInGroupApi({deviceIds:ids,groupId:null})
		ElMessage({
			type:res.code == 0 ? 'success' : 'error',
			message:res.msg
		})
		emit('close')
	})
}

const handleSizeChange = async (value) => {
	searchObj.limit = value
	searchObj.page = 1
	await getTable()
}

const handleCurrentChange = async (value) => {
	searchObj.page = value
	await getTable()
}

const handleSelectionChange = val => {
	multipleSelection.value = val
}

onMounted(async () => {
	await getTable()
})
</script>

<style lang="scss" scoped></style>